<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="i in names" :key="i">{{i}}</li>
    <button @click="btnClick">按钮</button>
  </ul>

  <ul>
    <li v-for="(i,index) in names">
      {{index+1}}.{{i}}
    </li>
  </ul>
</div>

<script src="../js/vue%20.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'hello',
      names:['火影忍者','海贼王','银魂']
    },
    methods: {
      btnClick() {
        //1.push方法
        //this.letters.push('aaa','bbb','ccc')

        //2.pop()删除数组中的最后一个元素
        this.letters.pop();

        //3.shift()删除数组中的第一个
        this.letters.shift();

        //4.unshift()在数组最前面添加元素

        //5.splice()删除,插入,替换
        //参数:splice(start)
        // 删除元素:第二个参数传入你要删除几个元素
        //替换元素: this.letters.splice(1,3,'m','n','l');
        //插入元素: this.letters.splice(1,0,'m','n','l');

        //6.sort()排序

        //7.reverse()将内容反转
      }
    }
  })
</script>
</body>
</html>